<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作样式</title>
    <style>
        .cls1{
            background: pink;
            height: 30px;
        }
    </style>
</head>
<body>
<div style="border: 1px solid red;" id="div">我是div</div>
<input type="button" id="btn1" value="获取div的样式"> &nbsp;&nbsp;
<input type="button" id="btn2" value="设置div的背景色为蓝色">&nbsp;&nbsp;
<br><br><br>
<input type="button" id="btn3" value="给div设置cls1样式"> &nbsp;&nbsp;
<input type="button" id="btn4" value="给div删除cls1样式"> &nbsp;&nbsp;
<input type="button" id="btn5" value="给div设置或删除cls1样式"> &nbsp;&nbsp;
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //获取css样式 css(name);
    $("#btn1").click(function () {
      //  alert($("#btn1").css("border"));
    });

    //设置css样式   css(name,value)
    $("#btn2").click(function () {
      // alert($("#div").css("background","blue"));
    });

    //给指定的对象添加样式类名 addClass(value)
    $("#btn3").click(function () {
        $("#div").addClass("cls1");
    });

    //给指定的对象删除样式类名 removeClass(value)
    $("#btn4").click(function () {
        $("div").removeClass("cls1");
    });

    //没有样式类名,则添加.有则删除  toggleClass(value)
    $("#btn5").click(function () {
        $("#div").toggleClass("cls1");
    });
</script>
</html>